<!-- 首页 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>实习管理系统</title>
		<link rel="stylesheet" href="./layui/css/layui.css">
		<link rel="stylesheet" href="./xznstatic/css/common.css"/>
		<link rel="stylesheet" href="./xznstatic/css/style.css"/>
		<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
	</head>
	<style type="text/css">
		html, body {
			height: 100%;
			background-color: #f2f7f6;
			font-family: 'Roboto', 'Microsoft YaHei', Arial, sans-serif;
			color: #333;
		}
		
		#iframe {
			width: 100%;
			margin-top: 60px;
			padding-top: 20px;
			box-shadow: 0 0 10px rgba(0,0,0,0.05);
			background-color: #ffffff;
			border-top-left-radius: 8px;
			border-top-right-radius: 8px;
			margin-right: 0;
			transition: all 0.3s ease;
		}

		#header {
			height: auto;
			background: #fff;
			border-bottom: 0;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 999;
			box-shadow: 0 1px 6px rgba(0,0,0,0.1);
		}

		#header .nav-top {
			display: flex;
			flex-direction: column;
			align-items: center;
			box-sizing: border-box;
			background: linear-gradient(135deg, #f2f7f6, #e6f0ed);
			position: relative;
			z-index: 2;
		}

		#header .system-title {
			width: 100%;
			text-align: center;
			padding: 12px 0;
			background-color: #3a7e6f;
			border-bottom: 1px solid #2d6557;
		}

		#header .nav-top-title {
			font-size: 20px;
			color: #fff;
			font-weight: bold;
		}

		#header .nav-menu {
			width: 100%;
			display: flex;
			justify-content: center;
			background-color: #f2f7f6;
			padding: 0;
			margin: 0;
			border-bottom: 1px solid #e0e0e0;
		}

		#header .nav-menu-item {
			display: inline-block;
			padding: 12px 25px;
			cursor: pointer;
			position: relative;
			text-align: center;
			color: #333;
			font-size: 15px;
			transition: all 0.3s;
		}

		#header .nav-menu-item:hover,
		#header .nav-menu-item.active {
			background-color: #3a7e6f;
			color: #fff;
		}
		
		/* 媒体查询适配移动设备 */
		@media screen and (max-width: 768px) {
			#iframe {
				margin-top: 110px;
			}
			
			#header .nav-menu {
				flex-wrap: wrap;
			}
			
			#header .nav-menu-item {
				padding: 10px 15px;
				font-size: 14px;
			}
		}
	</style>
	<body>
		<!-- start 顶部导航栏 -->
		<div id="header">
			<div class="nav-top">
				<div class="system-title">
					<div class="nav-top-title">实习管理系统的设计与实现</div>
				</div>
				<div class="nav-menu">
					<div class="nav-menu-item active" @click="navPage('./pages/home/home.html')">首页</div>
					<div class="nav-menu-item" @click="navPage('./pages/news/list.html')">系统公告</div>
					<div class="nav-menu-item" @click="centerPage()">个人中心</div>
					<div class="nav-menu-item" @click="jump(adminurl)">后台管理</div>
				</div>
			</div>
		</div>
		<!-- end 顶部导航栏 -->

		<iframe src="./pages/home/home.html" id="iframe" frameborder="0" scrolling="no" width="100%" onload="changeFrameHeight"></iframe>

		<script src="./xznstatic/js/jquery-1.11.3.min.js"></script>
		<script src="./layui/layui.js"></script>
		<script src="./js/vue.js"></script>
		<script src="./js/config.js"></script>

		<script>
			var vue = new Vue({
				el: '#header',
				data: {
					indexNav: indexNav,
					adminurl: adminurl,
					projectName: projectName,
					hasLogin: false,
					userName: '',
					isAdmin: false,
					activeMenu: '首页'
				},
				mounted: function() {
					this.checkLogin();
					this.setupActiveMenu();
				},
				methods: {
					jump(url) {
						window.open(url, '_blank');
					},
					setupActiveMenu() {
						// 设置活跃菜单
						var path = localStorage.getItem('iframeUrl') || './pages/home/home.html';
						if (path.includes('home.html')) {
							this.activeMenu = '首页';
						} else if (path.includes('news')) {
							this.activeMenu = '系统公告';
						} else if (path.includes('center.html')) {
							this.activeMenu = '个人中心';
						}
						
						// 绑定点击事件
						var menuItems = document.querySelectorAll('.nav-menu-item');
						menuItems.forEach(item => {
							item.addEventListener('click', function() {
								menuItems.forEach(i => i.classList.remove('active'));
								this.classList.add('active');
							});
						});
					},
					checkLogin() {
						var token = localStorage.getItem('token');
						if(token) {
							this.hasLogin = true;
							this.userName = localStorage.getItem('username') || '用户';
							this.isAdmin = localStorage.getItem('role') === 'admin';
						}
					},
					logout() {
						localStorage.removeItem('token');
						localStorage.removeItem('username');
						localStorage.removeItem('role');
						this.hasLogin = false;
						this.userName = '';
						this.isAdmin = false;
						window.location.reload();
					},
					navPage(url) {
						localStorage.setItem('iframeUrl', url);
						document.getElementById('iframe').src = url;
					},
					centerPage() {
						var userTable = localStorage.getItem('userTable');
						if (userTable) {
							this.navPage('./pages/' + userTable + '/center.html');
						} else {
							window.location.href = './pages/login/login.html';
						}
					}
				}
			});

			layui.use(['element','layer'], function() {
				var element = layui.element;
				var layer = layui.layer;
			});

			var iframeUrl = localStorage.getItem('iframeUrl');
			document.getElementById('iframe').src = iframeUrl || './pages/home/home.html';

			setInterval(function(){
				changeFrameHeight();
			}, 200);

			function changeFrameHeight() {
				var iframe = document.getElementById('iframe');
				if (iframe) {
					var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
					if (iframeWin.document.body) {
						iframe.height = iframeWin.document.body.scrollHeight;
					}
				}
			};

			window.onresize = function() {
				changeFrameHeight();
			}
		</script>
	</body>
</html>
